<template>
  <div class="home-view">
    <!-- 页面标题 -->
    <h1 class="report-title">智慧校园用户电子身份服务系统报表</h1>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="summary-cards" style="margin-bottom: 20px;">
      <el-col :span="6">
        <el-card>
          <template #header>
            <span>用户总数</span>
          </template>
          <div class="card-content">
            <h2>{{ summary.users }}</h2>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <template #header>
            <span>消息推送总数</span>
          </template>
          <div class="card-content">
            <h2>{{ summary.messagePushes }}</h2>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <template #header>
            <span>自动回复记录</span>
          </template>
          <div class="card-content">
            <h2>{{ summary.autoReplies }}</h2>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <template #header>
            <span>访问控制日志</span>
          </template>
          <div class="card-content">
            <h2>{{ summary.accessLogs }}</h2>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表行：左侧柱状图 + 右侧饼图 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <span>总体统计（柱状图）</span>
          </template>
          <div ref="barChart" class="chart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <span>总体统计（饼图）</span>
          </template>
          <div ref="pieChart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

// 假数据：可替换为从后端接口获取的实际数据
const summary = ref({
  users: 1200,
  messagePushes: 3500,
  autoReplies: 500,
  accessLogs: 800
})

// 折线图假数据：一周内每天的消息推送数
const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
const pushCounts = [300, 450, 500, 400, 600, 700, 800]

const barChart = ref(null)
const pieChart = ref(null)
const lineChart = ref(null)

onMounted(async () => {
  // 添加延时确保DOM已经渲染完成
  await nextTick()
  
  // 初始化柱状图
  if (barChart.value) {
    const barChartInstance = echarts.init(barChart.value)
    const barOption = {
      title: {
        text: '总体统计',
        left: 'center'
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['用户总数', '消息推送总数', '自动回复记录', '访问控制日志']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '数量',
        type: 'bar',
        data: [
          summary.value.users,
          summary.value.messagePushes,
          summary.value.autoReplies,
          summary.value.accessLogs
        ],
        itemStyle: {
          color: '#409EFF'
        }
      }]
    }
    barChartInstance.setOption(barOption)
  }

  // 初始化饼图
  if (pieChart.value) {
    const pieChartInstance = echarts.init(pieChart.value)
    const pieOption = {
      title: {
        text: '总体比例',
        subtext: '各项占比',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '数量',
          type: 'pie',
          radius: '50%',
          data: [
            { value: summary.value.users, name: '用户总数' },
            { value: summary.value.messagePushes, name: '消息推送总数' },
            { value: summary.value.autoReplies, name: '自动回复记录' },
            { value: summary.value.accessLogs, name: '访问控制日志' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    pieChartInstance.setOption(pieOption)
  }

  // 初始化折线图
  if (lineChart.value) {
    const lineChartInstance = echarts.init(lineChart.value)
    const lineOption = {
      title: {
        text: '消息推送趋势',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: days
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '推送数',
        type: 'line',
        data: pushCounts,
        smooth: true, // 平滑曲线
        lineStyle: {
          color: '#67C23A'
        },
        itemStyle: {
          color: '#67C23A'
        }
      }]
    }
    lineChartInstance.setOption(lineOption)
  }

  // 添加窗口大小改变时的自适应
  window.addEventListener('resize', () => {
    barChartInstance?.resize()
    pieChartInstance?.resize()
    lineChartInstance?.resize()
  })
})
</script>

<style scoped>
/* 全局样式调整：保证页面内所有 margin 为0 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.home-view {
  padding: 20px;
  background-color: var(--secondary-color, #f5f7fa);
}

.report-title {
  text-align: center;
  color: var(--text-color, #333);
  margin-bottom: 20px;
}

/* 统计卡片 */
.summary-cards .el-card {
  text-align: center;
}
.card-content h2 {
  font-size: 32px;
  color: var(--primary-color, #409EFF);
}

/* 图表卡片 */
.chart-card {
  margin-bottom: 20px;
}
.chart {
  width: 100%;
  height: 350px;
  min-height: 350px;  /* 添加最小高度 */
}
</style>
